const app = getApp()
let ctxWidth = '';
let ctxHeight = '';
let ctx = null; //Camera
let canvaCtx = null; //canvas
let canvas = null
Page({
    data: {
        eventChannel: null,
        devBack: 'back',
        type: ''
    },

    onLoad(options) {
        console.log(options, 'optionsoptionsoptions');
        if (options.type === '1') {
            this.setData({
                type: 1
            })
        }
        if (options.type === '2') {
            this.setData({
                type: 2
            })
        }
        if (options.type === '3') {
            this.setData({
                type: 3
            })
        }
        if (options.type === '4') {
            this.setData({
                type: 4
            })
        }
        this.data.eventChannel = this.getOpenerEventChannel()
    },

    onShow() {
        this.changeText()
    },

    changeText() {
        wx.getSystemInfo({
            success: res => {
                let convasX = res.windowWidth / 4; //遮罩层上下的高度(生成canvas的起始横坐标)
                let convasY = res.windowHeight / 5; //遮罩层左右的宽度(生成canvas的起始纵坐标)
                let canvasWidth = convasX * 3; //中间裁剪部位的宽度
                let canvasHeight = convasY * 3; //中间裁剪部位的高度
                let convasXL = convasX / 2;
                ctxWidth = canvasWidth; //canvas的宽度
                ctxHeight = canvasHeight; //canvas的高度
                this.setData({
                    info: res,
                    canvasWidth,
                    canvasHeight,
                    convasX,
                    convasXL,
                    convasY
                })
            }
        })
    },

    takePhoto() {
        ctx = wx.createCameraContext(); //初始化camera
        ctx.takePhoto({ //生成图片
            quality: 'high',
            success: (res) => { //得到图片
                console.log(res.tempImagePath)
                this.takeCanvas(res.tempImagePath)
                this.setData({
                    baseImg: res.tempImagePath,
                    isBaseImg: true,
                    isCanvas: true
                })
            }
        })
    },

    cancelPhoto() {
        wx.navigateBack()
    },

    atoR(deg) {
        return deg * (Math.PI / 180)
    },

    takeCanvas(path) { //将拍摄的照片绘制到canvas上
        wx.getImageInfo({
            src: path,
            success: imgInfo => {
                console.log(imgInfo, 'imgInfoimgInfoimgInfo');
                let {
                    info
                } = this.data;
                console.log(31231, info);
                let convasX = imgInfo.width / 4;
                let convasY = imgInfo.height / 5;
                let canvasWidth = convasX * 3; //显示区域宽度
                let canvasHeight = convasY * 3; //显示区域高度
                let convasXL = convasX / 2;
                // 我这里宽度和高度都计算了设备比，其实两个值是一样的 ，计算一个就够了
                let prxWidth = info.windowWidth / imgInfo.width; //计算设备比
                canvaCtx = wx.createCanvasContext("myCanvas"); //自定义组件，需要加this
                canvaCtx.drawImage(path, convasXL, (convasY - 120), canvasWidth, canvasHeight, 0, 0, (parseInt(canvasWidth) * prxWidth), (parseInt(canvasHeight) * prxWidth)); //绘制到canvas上的位置，canvas的宽高等
                // canvaCtx.translate(canvasWidth / 2, canvasHeight / 2);
                // canvaCtx.rotate((Math.PI/180)*-90)
                canvaCtx.draw(true, () => {
                    wx.canvasToTempFilePath({
                        fileType: "jpg",
                        quality: 0.3,
                        canvasId: "myCanvas",
                        success: canvasToPath => {
                            this.setData({
                                isSuccess: true,
                                isBaseImg: false,
                                isCanvas: false,
                                baseImg: canvasToPath.tempFilePath,
                                srcCanvasPath: canvasToPath.tempFilePath
                            })
                        }
                    })
                })
            }
        })
    },
    toxiangce() {
        wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: (res) => {
                // tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths
                console.log(tempFilePaths, 'tempFilePathstempFilePathstempFilePaths');
                if (this.data.type === 1 || this.data.type === 2) {
                    wx.getFileSystemManager().readFile({
                        filePath: tempFilePaths[0], // 选择图片返回的相对路径
                        encoding: 'base64', // 编码格式
                        success: res => {
                            // 成功的回调
                            this.data.eventChannel.emit('idCard', {
                                base64: res.data
                            })
                            wx.navigateBack()
                        },
                        fail: err => {
                            throw new Error(err.errMsg)
                        }
                    })
                }
                if (this.data.type === 3) {
                    this.data.eventChannel.emit('BankCard', {
                        url: tempFilePaths[0]
                    })
                    wx.navigateBack()
                }
                if (this.data.type === 4) {
                    this.data.eventChannel.emit('healthCard', {
                        url: tempFilePaths[0]
                    })
                    wx.navigateBack()
                }
            }
        })
    },
    clearPhoto() {
        canvaCtx.clearRect(0, 0, ctxWidth, ctxHeight)
        canvaCtx.draw()
        canvas.clearRect(0, 0, ctxHeight, ctxWidth)
        canvaCtx.draw()
        this.setData({
            srcCanvasPath: "",
            isCanvas: false,
            isSuccess: false,
            isBaseImg: false
        })
    },

    confirmBack() { //确定绘制成功后的操作，根据自己的需求写即可
        if (this.data.baseImg) {
            wx.getImageInfo({
                src: this.data.baseImg,
                success: res => {
                    canvas = wx.createCanvasContext("myCanvas2"); //自定义组件，需要加this
                    canvas.translate(0, this.data.canvasHeight);
                    canvas.rotate(-90 * Math.PI / 180)
                    console.log(666, res);
                    canvas.drawImage(res.path, 200, 0, this.data.canvasWidth, this.data.canvasHeight)
                    canvas.draw(true, () => {
                        wx.canvasToTempFilePath({
                            fileType: "jpg",
                            quality: 0.3,
                            canvasId: "myCanvas2",
                            success: canvasToPath => {
                                console.log(1234, canvasToPath);
                                this.setData({
                                    isSuccess: true,
                                    isBaseImg: false,
                                    isCanvas: false,
                                    baseImg: canvasToPath.tempFilePath,
                                    srcCanvasPath: canvasToPath.tempFilePath
                                })
                                if (this.data.type === 1 || this.data.type === 2) {
                                    wx.getFileSystemManager().readFile({
                                        filePath: this.data.baseImg, // 选择图片返回的相对路径
                                        encoding: 'base64', // 编码格式
                                        success: res => {
                                            // 成功的回调
                                            this.data.eventChannel.emit('idCard', {
                                                base64: res.data
                                            })
                                            wx.navigateBack()
                                        },
                                        fail: err => {
                                            throw new Error(err.errMsg)
                                        }
                                    })
                                }
                                if (this.data.type === 4) {
                                    console.log(this.data.baseImg);
                                    this.data.eventChannel.emit('healthCard', {
                                        url: this.data.baseImg
                                    })
                                    wx.navigateBack()
                                }
                                if (this.data.type === 3) {
                                    this.data.eventChannel.emit('BankCard', {
                                        url: this.data.baseImg
                                    })
                                    wx.navigateBack()
                                }
                            }
                        })
                    })
                }
            })
        }
    }
})